<template>
	<BpmComponent :processInstanceId="processInstanceId">
		<template #approval-info>
			<up-form labelPosition="left" labelWidth="120">
				<up-form-item v-for="field in formFields" :key="field.key" :label="field.label" borderBottom>
					<!-- 如果是附件 -->
					<view v-if="field.isDocument && formData[field.key]" class="file-actions">
						<template v-if="field.isArray">
							<template v-if="(formData[field.key] || []).length > 0">
								<view v-for="(item, idx) in formData[field.key]" :key="idx" class="file-item">
									<text class="file-link" @click="previewFile(item, formData[field.name]?.[idx])">
										{{ getFileName(formData[field.name]?.[idx]) || '无' }}
									</text>
								</view>
							</template>
							<template v-else>
								<text class="file-empty">无</text>
							</template>
						</template>

						<!-- 如果不是数组 -->
						<template v-else>
							<text class="file-link" @click="previewFile(formData[field.key], formData[field.name])">
								{{ getFileName(formData[field.name]) || '无' }}
							</text>
						</template>

					</view>
					<!-- 普通字段 -->
					<text v-else>
						{{ field.format ? field.format(formData[field.key]) : formData[field.key] || '无' }}
					</text>
				</up-form-item>
			</up-form>
		</template>
	</BpmComponent>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref, unref, reactive, nextTick, getCurrentInstance } from 'vue'
import BpmComponent from '@/components/processInstance/detail/index.vue'
import { LawsuitMajorApi, LawsuitMajorVO } from '@/api/legal/MajorCase/lawsuitmajor'
import { getFileName, parseArrayField, previewFile } from '@/utils/fileUtils'


const processInstanceId = ref(null)// 流程实例的编号
const detailId = ref(null)
const formData = ref<LawsuitMajorVO>({} as any)
const formFields = [
	{ key: 'caseUnit', label: '涉案单位' },
	{ key: 'charger', label: '负责人' },
	{ key: 'chargerContact', label: '负责人联系电话' },
	{ key: 'submitter', label: '资料提交人' },
	{ key: 'submitterContact', label: '资料提交人联系电话' },
	{ key: 'caseReason', label: '案由' },
	{ key: 'caseTarget', label: '涉案标的' },
	{ key: 'defendant', label: '被起诉人' },
	{ key: 'defendantContact', label: '被起诉人联系电话' },
	{ key: 'submitDate', label: '提交时间' },
	{ key: 'submitCount', label: '提交份数' },
	{ key: 'caseSummary', label: '简要案情' },
	{ key: 'lawsuitReason', label: '起诉理由' },
	{ key: 'lawsuitPurpose', label: '起诉目的' },
	{ key: 'remark', label: '备注' },
	{ key: 'eids', label: '附件', isDocument: true, name: 'ename', isArray: true },
] as any
onLoad(async (options) => {
	processInstanceId.value = options?.processInstanceId
	detailId.value = options?.id
	/** 获得详情 */
	getDetailById()
})
/** 获取页面详情 */
const getDetailById = async () => {
	try {
		const data = await LawsuitMajorApi.getLawsuitMajor(Number(detailId.value))
		formData.value = data
		formData.value.eids = parseArrayField(data.eids);
		formData.value.ename = parseArrayField(data.ename);
		console.log('formData.value', formData.value);
	} catch (error) {
		console.log('加载数据失败')
	}
}
</script>

<style>
/* 样式 */
.file-link {
	margin-right: 20rpx;
	display: inline-block;
	/* 让宽度生效 */
	max-width: 240px;
	/* 你可以改为你想要的宽度 */
	overflow: hidden;
	/* 超出部分隐藏 */
	white-space: nowrap;
	/* 不换行 */
	text-overflow: ellipsis;
	/* 超出显示省略号 */
	color: #007AFF;
	text-decoration: underline;
	cursor: pointer;

}
</style>